<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人迷宫探险 - 游戏大厅</title>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 30px;
            width: 100%;
        }

        h1 {
            font-family: 'Press Start 2P', cursive;
            font-size: 2.5rem;
            color: #ffcc00;
            text-shadow: 3px 3px 0 #ff6b00, 5px 5px 0 rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            letter-spacing: 2px;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #ffdd99;
            max-width: 800px;
            margin: 0 auto 20px;
            line-height: 1.6;
        }

        /* 游戏大厅区域 */
        .lobby-container {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
        }

        .player-card {
            width: 100%;
            max-width: 500px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 3px solid #444;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .player-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: #ff6b00;
            z-index: 1;
        }

        .player-card.active {
            border-color: #ffcc00;
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(255, 107, 0, 0.6);
        }

        .player-card.ready {
            border-color: #4CAF50;
        }

        .player-card h2 {
            font-size: 1.8rem;
            color: #4dabf7;
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .player-card h2 i {
            font-size: 1.5rem;
        }

        .player-info {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 25px;
        }

        .info-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            font-size: 1.1rem;
        }

        .info-item i {
            width: 30px;
            font-size: 1.2rem;
            color: #ffcc00;
            margin-right: 10px;
        }

        .status-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            margin-left: 10px;
            font-size: 0.9rem;
        }

        .status-ready {
            background: #4CAF50;
        }

        .status-waiting {
            background: #ff6b00;
        }

        .player-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .stat-box {
            background: rgba(25, 30, 50, 0.7);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
        }

        .stat-label {
            font-size: 1rem;
            color: #aaa;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 1.6rem;
            font-weight: bold;
            color: #ffcc00;
        }

        /* 玩家卡片颜色主题 */
        .player-1 {
            border-top-color: #ffeb3b;
        }
        
        .player-1 h2 {
            color: #ffeb3b;
        }
        
        .player-2 {
            border-top-color: #2196F3;
        }
        
        .player-2 h2 {
            color: #2196F3;
        }
        
        .player-3 {
            border-top-color: #4CAF50;
        }
        
        .player-3 h2 {
            color: #4CAF50;
        }
        
        .player-4 {
            border-top-color: #ffffff;
        }
        
        .player-4 h2 {
            color: #ffffff;
        }

        /* 控制区域 */
        .controls-section {
            width: 100%;
            max-width: 800px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin-bottom: 30px;
        }

        .controls-section h2 {
            font-size: 1.8rem;
            color: #4dabf7;
            margin-bottom: 25px;
            text-align: center;
            font-weight: bold;
        }

        .btn-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .btn {
            flex: 1;
            min-width: 200px;
            padding: 16px;
            font-size: 1.1rem;
            font-weight: bold;
            color: white;
            background: linear-gradient(to right, #ff6b00, #ffcc00);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 107, 0, 0.6);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn.secondary {
            background: linear-gradient(to right, #4a69bd, #6a89cc);
        }

        .btn.ready {
            background: linear-gradient(to right, #4CAF50, #8BC34A);
        }

        .btn i {
            font-size: 1.2rem;
        }

        /* 聊天区域 */
        .chat-container {
            width: 100%;
            max-width: 800px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin-bottom: 30px;
        }

        .chat-container h2 {
            font-size: 1.8rem;
            color: #4dabf7;
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
        }

        .chat-messages {
            height: 200px;
            overflow-y: auto;
            background: rgba(25, 30, 50, 0.7);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .message {
            padding: 10px 15px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            max-width: 80%;
        }

        .message.self {
            align-self: flex-end;
            background: rgba(255, 204, 0, 0.2);
            border-left: 3px solid #ffcc00;
        }

        .message.other {
            align-self: flex-start;
            background: rgba(77, 171, 247, 0.2);
            border-left: 3px solid #4dabf7;
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 0.9rem;
            color: #aaa;
        }

        .message-content {
            font-size: 1rem;
        }

        .chat-input {
            display: flex;
            gap: 10px;
        }

        .chat-input input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid rgba(127, 140, 141, 0.3);
            background: rgba(25, 30, 50, 0.7);
            border-radius: 8px;
            font-size: 16px;
            color: #ecf0f1;
            transition: all 0.3s;
        }

        .chat-input input:focus {
            outline: none;
            border-color: #ffcc00;
            box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
        }

        .chat-input button {
            padding: 12px 20px;
            background: linear-gradient(to right, #4CAF50, #8BC34A);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .chat-input button:hover {
            transform: translateY(-2px);
        }

        /* 迷宫装饰元素 */
        .maze-decoration {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.3;
        }

        .maze-wall {
            position: absolute;
            background: rgba(255, 204, 0, 0.1);
            border: 1px solid rgba(255, 204, 0, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .player-card {
                max-width: calc(50% - 15px);
            }
        }

        @media (max-width: 768px) {
            .player-card {
                max-width: 100%;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .player-stats {
                grid-template-columns: 1fr;
            }
            
            .btn-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>多人迷宫探险</h1>
            <p class="subtitle">游戏大厅 - 等待玩家加入并准备开始游戏</p>
        </header>

        <div class="lobby-container">
            <!-- 玩家1卡片 -->
            <div class="player-card player-1 active ready">
                <h2><i class="fas fa-user"></i> <a href="{% url 'Labyrinth_app:play' play_id=1%}">玩家1</a></h2>
                <div class="player-info">
                    <div class="info-item">
                        <i class="fas fa-user-tag"></i>
                        <span>用户名: </span>
                        <strong>MazeExplorer</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>位置: </span>
                        <strong>中国</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-signal"></i>
                        <span>延迟: </span>
                        <strong>32ms</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-hourglass-half"></i>
                        <span>状态: </span>
                        <strong>已准备</strong>
                        <span class="status-badge status-ready">READY</span>
                    </div>
                </div>
                <div class="player-stats">
                    <div class="stat-box">
                        <div class="stat-label">游戏次数</div>
                        <div class="stat-value">42</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">胜率</div>
                        <div class="stat-value">78%</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">最佳时间</div>
                        <div class="stat-value">02:15</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">平均时间</div>
                        <div class="stat-value">03:48</div>
                    </div>
                </div>
            </div>

            <!-- 玩家2卡片 -->
            <div class="player-card player-2">
                <h2><i class="fas fa-user"></i> <a href="{% url 'Labyrinth_app:play' play_id=2%}">玩家2</a></h2>
                <div class="player-info">
                    <div class="info-item">
                        <i class="fas fa-user-tag"></i>
                        <span>用户名: </span>
                        <strong>ShadowRunner</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>位置: </span>
                        <strong>美国</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-signal"></i>
                        <span>延迟: </span>
                        <strong>128ms</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-hourglass-half"></i>
                        <span>状态: </span>
                        <strong>准备中</strong>
                        <span class="status-badge status-waiting">WAITING</span>
                    </div>
                </div>
                <div class="player-stats">
                    <div class="stat-box">
                        <div class="stat-label">游戏次数</div>
                        <div class="stat-value">27</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">胜率</div>
                        <div class="stat-value">63%</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">最佳时间</div>
                        <div class="stat-value">02:42</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">平均时间</div>
                        <div class="stat-value">04:12</div>
                    </div>
                </div>
            </div>

            <!-- 玩家3卡片 -->
            <div class="player-card player-3">
                <h2><i class="fas fa-user"></i>  <a href="{% url 'Labyrinth_app:play' play_id=3%}">玩家3</a></h2>
                <div class="player-info">
                    <div class="info-item">
                        <i class="fas fa-user-tag"></i>
                        <span>用户名: </span>
                        <strong>PuzzleMaster</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>位置: </span>
                        <strong>日本</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-signal"></i>
                        <span>延迟: </span>
                        <strong>86ms</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-hourglass-half"></i>
                        <span>状态: </span>
                        <strong>已准备</strong>
                        <span class="status-badge status-ready">READY</span>
                    </div>
                </div>
                <div class="player-stats">
                    <div class="stat-box">
                        <div class="stat-label">游戏次数</div>
                        <div class="stat-value">58</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">胜率</div>
                        <div class="stat-value">82%</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">最佳时间</div>
                        <div class="stat-value">01:58</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">平均时间</div>
                        <div class="stat-value">03:24</div>
                    </div>
                </div>
            </div>

            <!-- 玩家4卡片 -->
            <div class="player-card player-4">
                <h2><i class="fas fa-user"></i>  <a href="{% url 'Labyrinth_app:play' play_id=4 %}">玩家4</a></h2>
                <div class="player-info">
                    <div class="info-item">
                        <i class="fas fa-user-tag"></i>
                        <span>用户名: </span>
                        <strong>LabyrinthKing</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>位置: </span>
                        <strong>德国</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-signal"></i>
                        <span>延迟: </span>
                        <strong>95ms</strong>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-hourglass-half"></i>
                        <span>状态: </span>
                        <strong>准备中</strong>
                        <span class="status-badge status-waiting">WAITING</span>
                    </div>
                </div>
                <div class="player-stats">
                    <div class="stat-box">
                        <div class="stat-label">游戏次数</div>
                        <div class="stat-value">35</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">胜率</div>
                        <div class="stat-value">71%</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">最佳时间</div>
                        <div class="stat-value">02:11</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">平均时间</div>
                        <div class="stat-value">03:35</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="test-controls" style="margin-top: 30px; background: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px;">
    <h2 class="section-title">迷宫生成测试</h2>
    <form id="mazeGenerateForm">
        <label for="mazeSize">迷宫大小:</label>
        <select id="mazeSize" name="size">
            <option value="15">15x15 (简单)</option>
            <option value="25">25x25 (中等)</option>
            <option value="35">35x35 (困难)</option>
        </select>
        <label for="mazeGen">迷宫生成算法:</label>
        <select id="mazeGen" name="gen">
            <option value="dfs"> 深度优先搜索</option>
            <option value="prim"> prim算法</option>
            <option value="kill">杀戮与狩猎</option>
            <option value="Kruskal">Kruskal算法</option>
            <option value="division">递归分割算法</option>
            <option value="Eller">Eller算法</option>
        </select>


        <button type="submit" class="btn" style="margin-top: 10px;">生成迷宫并保存到数据库</button>
    </form>
    <div id="responseArea" style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 5px;"></div>
</div>

<script>
    document.getElementById('mazeGenerateForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const responseArea = document.getElementById('responseArea');

        responseArea.innerHTML = '<p>正在生成迷宫并保存到数据库...</p>';

        try {
            const response = await fetch("{% url 'Labyrinth_app:labyrinth_sql_save' %}", {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            });

            const data = await response.json();

            if (data.status === 'success') {
                responseArea.innerHTML = `
                    <p>✅ 迷宫生成成功！</p>
                    <p>游戏ID: ${data.game_id}</p>
                    <p>迷宫大小: ${data.maze_size}x${data.maze_size}</p>
                    <p>难度: ${data.difficulty}</p>
                    <p>玩家数量: ${data.players_created}</p>
                `;
            } else {
                responseArea.innerHTML = `<p>❌ 错误: ${data.message || '未知错误'}</p>`;
            }
        } catch (error) {
            responseArea.innerHTML = `<p>❌ 网络错误: ${error.message}</p>`;
        }
    });
</script>

        <!-- 控制区域 -->
        <div class="controls-section">
            <h2>游戏控制</h2>
            <div class="btn-container">
                <button class="btn ready" id="readyBtn">
                    <i class="fas fa-check-circle"></i> 准备就绪
                </button>
                <button class="btn secondary" id="inviteBtn">
                    <i class="fas fa-user-plus"></i> 邀请好友
                </button>
                <button class="btn" id="startBtn" disabled>
                    <i class="fas fa-play"></i> 开始游戏
                </button>
                <button class="btn secondary" id="exitBtn">
                    <i class="fas fa-sign-out-alt"></i> 退出大厅
                </button>
            </div>
        </div>

        <!-- 聊天区域 -->
        <div class="chat-container">
            <h2>大厅聊天</h2>
            <div class="chat-messages">
                <div class="message self">
                    <div class="message-header">
                        <span>您 (MazeExplorer)</span>
                        <span>12:30</span>
                    </div>
                    <div class="message-content">大家好！准备好开始迷宫挑战了吗？</div>
                </div>
                <div class="message other">
                    <div class="message-header">
                        <span>PuzzleMaster</span>
                        <span>12:31</span>
                    </div>
                    <div class="message-content">我已经准备好了，今天要打破我的最佳记录！</div>
                </div>
                <div class="message other">
                    <div class="message-header">
                        <span>ShadowRunner</span>
                        <span>12:32</span>
                    </div>
                    <div class="message-content">稍等一下，我需要调整一下设置</div>
                </div>
                <div class="message other">
                    <div class="message-header">
                        <span>LabyrinthKing</span>
                        <span>12:33</span>
                    </div>
                    <div class="message-content">今天谁会是第一个到达终点的？</div>
                </div>
            </div>
            <div class="chat-input">
                <input type="text" placeholder="输入消息...">
                <button><i class="fas fa-paper-plane"></i> 发送</button>
            </div>
        </div>

        <!-- 迷宫装饰元素 -->
        <div class="maze-decoration" id="mazeDecoration"></div>
    </div>

    <script>
        // 创建迷宫装饰元素
        function createMazeDecoration() {
            const mazeContainer = document.getElementById('mazeDecoration');
            const wallCount = 30;
            
            for (let i = 0; i < wallCount; i++) {
                const wall = document.createElement('div');
                wall.className = 'maze-wall';
                
                // 随机位置和大小
                const width = Math.random() * 80 + 20;
                const height = Math.random() * 80 + 20;
                const left = Math.random() * 100;
                const top = Math.random() * 100;
                
                wall.style.width = `${width}px`;
                wall.style.height = `${height}px`;
                wall.style.left = `${left}%`;
                wall.style.top = `${top}%`;
                
                mazeContainer.appendChild(wall);
            }
        }

        // 玩家准备状态切换
        document.getElementById('readyBtn').addEventListener('click', function() {
            const btn = this;
            const playerCard = document.querySelector('.player-card.player-1');
            
            if (btn.classList.contains('ready')) {
                btn.classList.remove('ready');
                btn.innerHTML = '<i class="fas fa-hourglass-half"></i> 准备中';
                playerCard.classList.remove('ready');
            } else {
                btn.classList.add('ready');
                btn.innerHTML = '<i class="fas fa-check-circle"></i> 准备就绪';
                playerCard.classList.add('ready');
                
                // 检查是否所有玩家都准备好了
                checkAllPlayersReady();
            }
        });

        // 检查所有玩家是否准备就绪
        function checkAllPlayersReady() {
            const playerCards = document.querySelectorAll('.player-card');
            let allReady = true;
            
            playerCards.forEach(card => {
                if (!card.classList.contains('ready')) {
                    allReady = false;
                }
            });
            
            if (allReady) {
                document.getElementById('startBtn').disabled = false;
                document.getElementById('startBtn').innerHTML = '<i class="fas fa-play"></i> 开始游戏';
            } else {
                document.getElementById('startBtn').disabled = true;
            }
        }

        // 开始游戏按钮
        document.getElementById('startBtn').addEventListener('click', function() {
            alert('所有玩家已准备就绪，即将开始游戏！');
            // 实际应用中这里会跳转到游戏页面
        });

        // 邀请好友按钮
        document.getElementById('inviteBtn').addEventListener('click', function() {
            alert('邀请链接已复制到剪贴板：https://maze-game.com/invite/123456');
        });

        // 退出大厅按钮
        document.getElementById('exitBtn').addEventListener('click', function() {
            if (confirm('确定要退出游戏大厅吗？')) {
                alert('已退出游戏大厅，正在返回主菜单...');
                // 实际应用中这里会跳转到主菜单
            }
        });

        // 发送聊天消息
        document.querySelector('.chat-input button').addEventListener('click', sendMessage);
        document.querySelector('.chat-input input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        function sendMessage() {
            const input = document.querySelector('.chat-input input');
            const message = input.value.trim();
            
            if (message) {
                const chatMessages = document.querySelector('.chat-messages');
                const now = new Date();
                const time = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`;
                
                const messageElement = document.createElement('div');
                messageElement.className = 'message self';
                messageElement.innerHTML = `
                    <div class="message-header">
                        <span>您 (MazeExplorer)</span>
                        <span>${time}</span>
                    </div>
                    <div class="message-content">${message}</div>
                `;
                
                chatMessages.appendChild(messageElement);
                input.value = '';
                
                // 滚动到底部
                chatMessages.scrollTop = chatMessages.scrollHeight;
                
                // 模拟其他玩家回复
                setTimeout(() => {
                    const players = ['ShadowRunner', 'PuzzleMaster', 'LabyrinthKing'];
                    const randomPlayer = players[Math.floor(Math.random() * players.length)];
                    const replies = [
                        '收到！',
                        '准备好了吗？',
                        '这次我会赢的！',
                        '大家加油！',
                        '迷宫难度选多少？',
                        '我有个新策略'
                    ];
                    
                    const reply = replies[Math.floor(Math.random() * replies.length)];
                    
                    const replyElement = document.createElement('div');
                    replyElement.className = 'message other';
                    replyElement.innerHTML = `
                        <div class="message-header">
                            <span>${randomPlayer}</span>
                            <span>${time}</span>
                        </div>
                        <div class="message-content">${reply}</div>
                    `;
                    
                    chatMessages.appendChild(replyElement);
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                }, 1000 + Math.random() * 3000);
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            createMazeDecoration();
            
            // 添加玩家头像悬停效果
            document.querySelectorAll('.player-card').forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-10px)';
                    this.style.boxShadow = '0 15px 35px rgba(0, 0, 0, 0.7)';
                });
                
                card.addEventListener('mouseleave', function() {
                    if (!this.classList.contains('active')) {
                        this.style.transform = 'translateY(0)';
                        this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.5)';
                    }
                });
            });
        });
    </script>
</body>
</html>